<template>
  <div class="add">
    <van-nav-bar
      title="添加"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <main>
      <div class="houseMsg">房源信息</div>
      <div class="cityName">
        <van-cell
          title="小区名称"
          is-link
          value="请输入小区名称"
          v-model="community.name"
          @click="()=>{this.$router.push('/rent/search')}"
        />
      </div>
      <div class="money">
        <span>租&emsp;&emsp;金</span>
        <input type="text" v-model="formData.price" placeholder="请输入租金/月" />
        <span>￥/月</span>
      </div>
      <div class="money">
        <span>建筑面积</span>
        <input type="text" v-model="formData.size" placeholder="请输入租金/月" />
        <span>㎡</span>
      </div>
      <div class="oriented">
        <van-cell
          @click="selectRoom"
          title="选择户型"
          is-link
          :value="formData.roomType?formData.roomType:'请选择'"
        />
        <van-popup v-model="roomTypeShow" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="roomTypeShow = false"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>
      <div class="floow">
        <van-cell
          @click="selectFloor"
          title="所在楼层"
          is-link
          :value="formData.floor?formData.floor:'请选择'"
        />
      </div>
      <div class="oriented">
        <van-cell
          @click="selectOriented"
          title="户型朝向"
          is-link
          :value="formData.oriented?formData.oriented:'请选择'"
        />
      </div>
      <div class="houseTitle">
        <p>房屋标题</p>
        <van-field
          v-model="formData.title"
          rows="2"
          autosize
          type="textarea"
          maxlength="20"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          show-word-limit
        />
      </div>
      <div class="fileImg">
        <p>房屋图像</p>
        <div>
          <van-uploader v-model="fileList" multiple />
        </div>
      </div>
      <div class="supporting">
        <p>房屋配置</p>
        <div class="supporting_item">
          <van-grid :column-num="5" :border="false">
            <van-grid-item
              @click="selectSupporting"
              v-for="(v,i) in icons"
              :key="i"
              :icon="v.icon"
              :text="v.title"
            />
          </van-grid>
        </div>
      </div>
      <div class="description">
        <p>房屋描述</p>
        <van-field
          v-model="formData.description"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入房屋描述"
          show-word-limit
        />
      </div>
    </main>
    <footer>
      <van-button plain type="primary" @click="()=>{this.$router.go(-1)}">取消</van-button>
      <van-button type="primary" @click="submitForm">确认</van-button>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        description: "", //房屋描述
        community: "", //小区id
        title: "", //房屋标题
        price: "", //价格
        size: "", //面积
        roomType: "", //户型
        floor: "", //楼层
        oriented: "", //朝向
        houseImg:"",
        supporting: [] //家具
      },
      fileList:[],
      icons: [
        {
          title: "衣柜",
          icon: "shop-o"
        },
        {
          title: "洗衣机",
          icon: "tosend"
        },
        {
          title: "空调",
          icon: "other-pay"
        },
        {
          title: "天然气",
          icon: "fire-o"
        },
        {
          title: "冰箱",
          icon: "completed"
        },
        {
          title: "暖气",
          icon: "hotel-o"
        },
        {
          title: "电视",
          icon: "tv-o"
        },
        {
          title: "热水器",
          icon: "cluster-o"
        },
        {
          title: "宽带",
          icon: "bar-chart-o"
        },
        {
          title: "沙发",
          icon: "desktop-o"
        }
      ],
      community:{
        name:"",
        id:"",
      }, //小区名
      columns: [], //选择数据
      isWho: "",
      roomTypeShow: false
    };
  },
  created(){
    console.log();
    this.getSelectCommunityId()
  },
  methods: {
    getSelectCommunityId(){
      const {community:id,communityName:name} = this.$route.query;
      if(id&&name){
        this.community.name = name;
        this.community.id = id;
        this.formData.community = id;
      }
    },
    //确认选择
    onConfirm(e) {
      if (this.isWho === "选择户型") {
        this.formData.roomType = e;
      } else if (this.isWho === "选择楼层") {
        this.formData.floor = e;
      } else if (this.isWho === "选择朝向") {
        this.formData.oriented = e;
      }
      this.roomTypeShow = false;
    },
    //选择户型
    selectRoom() {
      this.columns = ["一室", "二室", "三室", "四室", "四室+"];
      this.isWho = "选择户型";
      this.roomTypeShow = true;
    },
    //选择楼层
    selectFloor() {
      this.columns = ["高楼层", "中楼层", "低楼层"];
      this.isWho = "选择楼层";
      this.roomTypeShow = true;
    },
    //选择朝向
    selectOriented() {
      this.columns = ["东", "西", "南", "北", "东南", "东北", "西南", "西北"];
      this.isWho = "选择朝向";
      this.roomTypeShow = true;
    },
    //选择家具
    selectSupporting(e) {
      if (e.target.nodeName === "I") {
        e.target.parentNode.classList.toggle("actives");
        let index = this.formData.supporting.findIndex(
          v => v === e.target.nextElementSibling.innerHTML
        );
        if (index === -1) {
          this.formData.supporting.push(e.target.nextElementSibling.innerHTML);
        } else {
          this.formData.supporting.splice(index, 1);
        }
      }
    },
    async uploadFormList(){
      const formData = JSON.parse(JSON.stringify(this.formData));
      formData.supporting =formData.supporting.join('|');
      const {data} = await this.$http.uphouseInfo(formData);
      return data;
    },
    async uploadImg(){
      const {fileList} = this;
      if(!fileList.length)return false;
      const imgList =  new FormData();
      fileList.forEach(item=>{
        imgList.append('file',item.file);
      })
      console.log(imgList);
      const {data} = await this.$http.uploadImg(imgList)
      const {status,description,body} = data;
      if(status!==200){
        this.$toast.fail(description)
        return  Promise.reject('图片上传失败了')
      }
      this.formData.houseImg = body.join("|")
      this.$toast.success(description);
      return true;
    },
    //确认添加
    async submitForm() {
      const flag = await this.uploadImg();
      if(!flag)return console.log('未填图片'); 
      const data = await this.uploadFormList();
      console.log(data);
    }
  }
};
</script>

<style lang='less'>
.add {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    overflow: auto;
  }
  footer {
    width: 100%;
    height: 50px;
    display: flex;
    button {
      flex: 1;
      height: 100%;
      border: none;
    }
  }
}
footer button:nth-child(1) {
  background: rgba(248, 248, 248, 0.979);
}
.houseMsg {
  width: 100%;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  color: #21b97a;
  font-size: 15px;
}
.cityName {
  border-bottom: 1px solid #eee;
}
.van-cell__title span {
  color: #666;
}
.money {
  padding: 10px 15px;
  display: flex;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #666;
  input {
    border: none;
    outline: none;
    flex: 1;
    padding-left: 30px;
  }
}
.money input::placeholder {
  font-size: 14px;
  color: #ccc;
}
.floow {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}
.houseTitle {
  width: 100%;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  p {
    color: #21b97a;
    font-size: 15px;
    margin-bottom: 10px;
  }
  .van-cell {
    border: 1px solid #eee;
  }
}
.fileImg {
  padding: 10px 15px;
  color: #21b97a;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  p {
    margin-bottom: 10px;
  }
}
.supporting {
  width: 100%;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  p {
    color: #21b97a;
    font-size: 15px;
    margin-bottom: 10px;
  }
}
.description {
  width: 100%;
  padding: 10px 15px;
  p {
    color: #21b97a;
    font-size: 15px;
    margin-bottom: 10px;
  }
  .van-cell {
    border: 1px solid #eee;
  }
}
.actives {
  color: #21b97a;
  i {
    color: #21b97a;
  }
  span {
    color: #21b97a;
  }
}
</style>